<template>
    <div style="padding:20px 20px 20px 20px;background:#fff;">
      <div class="table">
        <table border="0" width="95%" cellspacing="0" cellpadding="0" 
        style="border-collapse:collapse;">
          <tr>
            <th class="td1">---</th>
            <th class="td1">全部</th>
            <th class="td1">首次充值</th>
            <th class="td1">二次充值</th>
            <th class="td1">首次开卡</th>
            <th class="td1">二次开卡</th>
            <th class="td1">本月新增</th>
          </tr>
          <tr>
            <td>会员总数</td>
            <td>{{info.count}}</td>
            <td>{{info.rechargeFirst}}</td>
            <td>{{info.rechargeTwo}}</td>
            <td>{{info.cardFirst}}</td>
            <td>{{info.cardTwo}}</td>
            <td>{{info.month}}</td>
          </tr>
          <tr v-for="(item,index) in info.arr" :key="index">
            <td>{{item.source}}</td>
            <td>{{item.total}}</td>
            <td>{{item.rechargeFirst}}</td>
            <td>{{item.rechargeTwo}}</td>
            <td>{{item.cardFirst}}</td>
            <td>{{item.cardTwo}}</td>
            <td>{{item.month}}</td>
          </tr>
        </table>
      </div>
</div>
</template>
<script>
export default {
  name: 'userTable',
  props:['info'],
  data(){
    return {}
  },
  created: function() {
    
  },
  methods: {
   
  }
};
</script>
<style>
.table{
  width:95%;
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  padding-top:10px;
}
.td1{
  width:14%;
}
</style>